<template>
  <div>
    <el-table ref="multipleTabless" :data="datalist" border element-loading-text="拼命加载中" style='margin-top: 0.1rem;' :row-style="rowStyle" @row-dblclick="handledbsupplier">
      <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
      <el-table-column label="名称" property="company"></el-table-column>
      <el-table-column label="联系人" property="username" align="center"></el-table-column>
      <el-table-column label="联系人电话" property="userphone" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      purchase: '', //公司名称
      purchasecode: '', //公司code
      popupsupplier: false, //弹窗
      datalist: [
        { code: 'ad00001', company: 'xxxx公司', username: '张三', userphone: '156********' },
        { code: 'ad00002', company: 'xxxx公司', username: '李四', userphone: '156********' },
        { code: 'ad00003', company: 'xxxx公司', username: '王二', userphone: '156********' },
        { code: 'ad00004', company: 'xxxx公司', username: '麻子', userphone: '156********' },
        { code: 'ad00005', company: 'xxxx公司', username: '张三1', userphone: '156********' },
        { code: 'ad00006', company: 'xxxx公司', username: '李四1', userphone: '156********' },
        { code: 'ad00007', company: 'xxxx公司', username: '王二1', userphone: '156********' },
        { code: 'ad00008', company: 'xxxx公司', username: '麻子1', userphone: '156********' },
        { code: 'ad00009', company: 'xxxx公司', username: '张三2', userphone: '156********' },
        { code: 'ad000010', company: 'xxxx公司', username: '李四2', userphone: '156********' },
      ], //这个数据是请求过来的数据，我写死了
      datarow: '', // 当前已选择行
      dataindex: 0, // 当前选择行的index
      refenter: '', //光标移动
    }
  },
  mounted() {
    addEventListener('keyup', this.keyUp) //创建监听键盘事件
  },
  methods: {
    keyUp(e) {
      // 表格为空，不执行下方
      if (this.datalist.length == 0) {
        return
      }
      if (e.keyCode == 40) {
        // 下键
        if (this.dataindex == this.datalist.length - 1) {
          this.dataindex = 0 //当选中的index与数据的天数相等时，在按下键就要返回第一个
          this.datarow = this.datalist[0]
          let height = 47 //计算表格一行的高度，用于出现滚动条的时候，页面展示选中的某一行
          this.$refs.multipleTabless.bodyWrapper.scrollTop = -(height * (this.datalist.length - 6))
        } else {
          if (this.dataindex > 6 && this.dataindex < 14) {
            let height = 47 //计算选中行离表格顶部的距离
            this.$refs.multipleTabless.bodyWrapper.scrollTop = height * (this.dataindex - 6)
          }
          this.dataindex = this.dataindex + 1
          this.datarow = this.datalist[this.dataindex] // 当前已选择行
        }
      } else if (e.keyCode == 38) {
        // 上键
        if (this.dataindex == 0) {
          //当选中的index等于0时，说明到顶了，再按上键就要返回到表格的底部，并计算距离表格顶部的距离
          this.dataindex = this.datalist.length - 1
          this.datarow = this.datalist[this.dataindex] // 当前已选择行
          let height = 47
          this.$refs.multipleTabless.bodyWrapper.scrollTop = height * (this.datalist.length - 6)
        } else {
          this.dataindex = this.dataindex - 1
          this.datarow = this.datalist[this.dataindex]
          let height = 47
          this.$refs.multipleTabless.bodyWrapper.scrollTop += -(height * 1)
        }
      } else if (e.keyCode == 37) {
        //左键赋值给输入框
        var row = this.selectedRow
        this.purchase = row.company
        this.purchasecode = row.code
        this.$refs[this.refenter].focus() //光标移动到那个输入框
        this.popupsupplier = false //关闭弹窗
        removeEventListener('keyup', this.keyUp) //关闭键盘事件
      }
    },
    //改变表格选中某一行    的颜色
    rowStyle(row) {
      console.log(row)
      if (row.rowIndex == this.dataindex) {
        return {
          color: '#F56C6C',
        }
      }
    },
    //双击选择某一行
    handledbsupplier(row) {
      this.purchase = row.company
      this.purchasecode = row.code
    },
    //公司回车事件
    getpurchaseevet(nextRef) {
      this.refenter = nextRef //下个光标移动到那个输入框
      this.popupsupplier = true //弹窗
    },
  },
}
</script>